<template>
    <div class="app-container">
        <el-row :gutter="20">
            <el-col :span="24">
                <el-card>
                    <div slot="header" class="clearfix">
                        <span>我的选择</span>
                    </div>
                    <div class="body">
                        <el-avatar> user </el-avatar>
                        <el-avatar> user </el-avatar>
                    </div>
                </el-card>
            </el-col>
           
        </el-row>
        <el-row :gutter="20">
            <el-col :span="12">
                <el-card>
                    <div slot="header" class="clearfix">
                        <span>签到记录</span>
                    </div>
                    <div class="body">
                        <el-table v-loading="loading" :data="studentAttendanceList">
                            <!-- <el-table-column type="selection" width="55" align="center" /> -->
                            <el-table-column label="id" align="center" prop="id" />
                            <el-table-column label="开始签到时间" prop="createTime" :show-overflow-tooltip="true" width="200" />
                            <el-table-column label="签到时间" prop="signInTime" :show-overflow-tooltip="true" width="200" />
                            <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
                            <template slot-scope="scope">
                                <el-button v-if="scope.row.statusCode==1000"
                                    size="mini"
                                    type="text"
                                    icon="el-icon-edit"
                                    @click="signin(scope.row)"
                                    >签到
                                </el-button>
                            </template>
                            </el-table-column>
                        </el-table>
                    </div>
                    
                </el-card>
            </el-col>
            <el-col :span="12">
                <el-card>
                    <div slot="header" class="clearfix">
                        <span>问答记录</span>
                    </div>
                </el-card>
            </el-col>
        </el-row>
    </div>
</template>
<script>
import {lessonInfo} from "@/api/feedback/lesson";
import {startSign} from "@/api/feedback/attendance";
import {addStudentattendance, listStudentattendance} from "@/api/feedback/studentattendance";
import user from "@/store/modules/user";

export default {
    name: "student",
  
    data() {
        return {
            ws:undefined,
            lessonId:undefined,
            loading:true,
            userId:undefined,
            studentAttendanceList:[],
           
        }
    },
    created() {
        let lessonId = this.$route.params && this.$route.params.lessonId;
        this.lessonId=lessonId;
        this.init();
        
    },
    methods:{
        init(){
            this.userId=this.$store.state.user.id;
            //todo 先发个消息 让他注册一下 教师也需要
            this.loadstudentAttendance();
            
        },
        loadstudentAttendance(){
            
            let queryParams = {lessonId:this.lessonId,studentId:this.userId,statusCode:1000};
           listStudentattendance(queryParams).then(e=>{
                this.loading=false;
                this.studentAttendanceList=e.rows; 
                console.log(this.studentAttendanceList);
           }).catch();
        },
        signin(row){
            let data={lessonId:this.lessonId,businessId:row.id,userId:this.userId};
            let msg = data;
            msg.type=0;
            this.ws.send(JSON.stringify(msg));
            // startSign(data).then((res)=>{
            //     // this.studentList=res.data.studentList;
            // }).catch();
       },
      
       initStudentChannle() {
            let msg= {lessonId:this.lessonId,type:-1};
            
            if (this.ws.readyState === WebSocket.OPEN) {
                this.ws.send(JSON.stringify(msg));
            } else if (this.ws.readyState == WebSocket.CONNECTING) {
                // Wait for the open event, maybe do something with promises
                // depending on your use case. I believe in you developer!
                setTimeout(()=>{this.initStudentChannle()},1000);
            } else {
                // etc.
            }
        }
    },
    mounted() {
        /**
         * 开始链接
         */
        this.ws = new WebSocket("ws://"+process.env.VUE_APP_WS+"/ws/student");
        this.ws.onopen = function () {
            // Notification({
            //     title: '成功',
            //     message: '课堂考勤系统连接成功',
            //     type: 'success'
            // });
          console.log("建立成功");
           
        };
        this.ws.onmessage= function(e) {
            console.log("收到消息");
            var data = JSON.parse(e.data)
        
            // Notification({
            //     title: '反馈',
            //     message: '你收到一个课堂提问',
            //     type: 'success'
            // });
            console.log(data)
        };
        this.ws.onclose = function () {
            console.log("连接关闭");
        };

        this.initStudentChannle();
       
    }
    
}
</script>